He intentado diferentes formas de solucionar este problema, pero no puedo hacerlo con éxito.
Tengo el siguiente componente Reactjs:
import EventItem from "../EventItem"; type Props = { events: [id: number, attributes: { slug: string; name: string; }]; }; const EventList = ({ events }: Props) => { return ( <section> <div className="max-w-7xl mx-auto px-4 mb-5"> <div className="max-w-sm mx-auto md:max-w-none bg-events-list p-4" data-aos="fade-up"> <div className="grid gap-12 md:grid-cols-4 md:gap-x-4 md:gap-y-8 items-start"> {events?.map((eventMap, index) => ( <EventItem key={index} url={`/e/${eventMap.attributes.slug}`} name={eventMap.attributes.name} /> ))} </div> </div> </div> </section> ); }; export default EventList;Mecanografiado advierte que
Property 'attributes' does not exist on type 'number | { slug: string; name: string; }'. Property 'attributes' does not exist on type 'number'.Y mi estructura de datos es:
{ "id": 2, "attributes": { "name": "Event Name", "slug": "event-name", } }¿Cómo puedo arreglarlo? ¿Qué pasa con mis accesorios de tipo? ¡Gracias!
type Props = { events: [id: number, attributes: { slug: string; name: string; }]; }; Su escritura dijo que los eventos son iguales a una matriz con una identificación y un objeto que contiene { slug: string; name: string; }
Pero para lograr lo que quieres debes escribir así
type Props = { events: Array<{id: number, attributes: { slug: string; name: string; }}>; }; Ahora, events es una matriz de objetos con su estructura :)
Prueba lo siguiente:
type Props = { events: { id: number, attributes: { slug: string; name: string; } } []; };type Props = { events: [id: number, attributes: { slug: string; name: string; }]; };Parece que el tipo de eventos debería ser objeto pero matriz. ¿Podrías probar esto?